<template>
  <div class="task fill flex-col">
    <ul class="tabs flex-row">
      <li @click="handleTabClick(index)" class="tab flex-center" :class="{active: index===active}" v-for="(tab,index) in tabs" :key="index">
        {{ tab.label }}
      </li>
    </ul>
    <div class="main flex-1">
      <keep-alive>
        <component :is="tabs[active].is"/>
      </keep-alive>
    </div>
  </div>
</template>

<script>
const Performance = () => import(/* webpackChunkName: "TaskPerformance" */"@/layouts/window/task/Performance")
const Process = () => import(/* webpackChunkName: "TaskProcess" */"@/layouts/window/task/Process")
const StartUp = () => import(/* webpackChunkName: "TaskStartUp" */"@/layouts/window/task/StartUp")
const AppRecord = () => import(/* webpackChunkName: "TaskAppRecord" */"@/layouts/window/task/AppRecord")
const User = () => import(/* webpackChunkName: "TaskUser" */"@/layouts/window/task/User")

export default {
  name: "Task",
  components: {Performance, Process, StartUp, AppRecord, User},
  data: () => ({
    tabs: [
      {label: "进程", is: "Process"},
      {label: "性能", is: "Performance"},
      {label: "应用历史记录", is: "AppRecord"},
      {label: "启动", is: "StartUp"},
      {label: "用户", is: "User"},
      {label: "详细信息"},
      {label: "服务"},
    ],
    active: 0,
  }),
  methods:{
    handleTabClick(index) {
      this.active = index
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/assets/css/var";
  .task{
    user-select: none;
  }
  .tabs{
    margin-left: $ms;
    padding-top: $ps;
    .tab{
      background-color: #f0f0f0;
      padding: $pn;
      height: 25px;
      border: 1px solid #ccc;
      cursor: default;
      &:not(:first-child){
        border-left: none;
      }
    }
    .active{
      position: relative;
      top: -2px;
      border-bottom: none;
      border-left: 1px solid #ccc!important;
      background-color: white;
    }
  }
  .main{
    padding-top: $mn;
  }

</style>
